前面提到了物件、陣列、DOM元素的選取、事件監聽,以及最後的localStorage。這些足夠我們用JavaScript做一個小小的網頁程式,來驗證一下之前提到的方法。
這次我們要來做的是Todo List。
假設金庸先生要邀請武林高手來參加華山論劍,要邀請的人太多了,他記性不好,所以寫了一個小程式來記錄與會者名單。大概是長這個樣子。
然後在來拆解畫面上的功能:
我們可已先把上面的的那張圖區分為三種程式區塊:
所以我們就可以開始實作了!
畫面上的HTML碼如下:
<div class="content">
<div class="logo">
<img src="https://imgur.com/uEvCO7p.png" width="150px" alt="">
<div class="logotext">TODO LIST</div>
</div>
<div class="addList">
<input type="text" size="30" class="text" placeholder="請輸入與會者姓名" required>
<button type="button" class="send">新增邀請名單</button>
</div>
</div>
<div class="item">
<h3>計畫邀請<span class="noneNum"></span>人</h3>
<ul class="list">
</ul>
</div>
<div class="finishedItem">
<h3>已邀請<span class="doneNum"></span>人</h3>
<ul id="finishlist">
</ul>
</div>
進入JavaScript的部分,先把DOM元素選取起來:
//指定DOM
let send = document.querySelector('.send');
let list = document.querySelector('.list');
let finishList = document.getElementById('finishlist');
接下來定義資料的部分:
//資料:設定計畫邀請名單「listData」的localStorage資料,轉為陣列物件
let data = JSON.parse(localStorage.getItem('listData')) || [];
//資料:設定寄出名單「listFinish」的localStorage資料,轉為陣列物件
let finishData = JSON.parse(localStorage.getItem('listFinish')) || [];
接下來把事件綁訂到前面指定的DOM元素上。然後更新資料,此時尚未輸入資料,localStorage的key應該還沒建立,所以為空陣列。
//事件綁定,監聽與更新
send.addEventListener('click', addData);
list.addEventListener('click', toggleDone);
finishList.addEventListener('click', deleDone);
//更新畫面上的資料
updateList(data);
updateFinish(finishData);
按下「新增邀請名單後」把資料新增到data中,並叫用updateList這個函式,把資料組字串,渲染到畫面中。
//按下「新增邀請名單後」,把資料新增到data中,並叫用updateList
function addData(e) {
var txt = document.querySelector('.text');
if (txt.value == "") {
alert('必須輸入與會者姓名');
return;
}
var toInvite =
{
content: txt.value
}
data.push(toInvite);
updateList(data);
localStorage.setItem('listData', JSON.stringify(data));
txt.value = '';
}
//更新邀請清單
function updateList(items) {
str = '';
let len = items.length;
//for迴圈組字串
for (let i = 0; len > i; i++) {
console.log(items[i])
str += `<li><a href="#" data-index=${i}>移到已邀請</a><span>${items[i].content}</span></li>`;
}
list.innerHTML = str;
let noneNum = document.querySelector('.noneNum');
noneNum.textContent = len;
}
按下「移到已邀請」時,執行以下程式區塊:
//將與會者由邀請清單移至邀請函已寄出清單
function toggleDone(e){
//避免事件冒泡
e.preventDefault();
//如果點選的不是a標籤,那就不往下執行
if(e.target.nodeName !== 'A'){
return;
}
let index = e.target.dataset.index;
//把點選的資料推送到finishData中
finishData.push(data[index]);
//清除計畫邀請data中的資料
data.splice(index,1);
//更新計畫邀請的名單
localStorage.setItem('listData',JSON.stringify(data));
//渲染網頁
updateList(data);
//更新已寄出邀請函的名單
localStorage.setItem('listFinish',JSON.stringify(finishData));
//渲染網頁
updateFinish(finishData);
}
然後是渲染「已邀請名單」的部分:
//更新已寄邀請函清單
function updateFinish(finishItems){
let mailStr = '';
let len = finishItems.length;
console.log(finishItems);
console.log(len);
//for迴圈組字串
for(let i=0;i<len; i++){
console.log(finishItems[i]);
mailStr+= `<li><a href="#" data-num=${i}>移除</a><span>${finishItems[i].content}</span></li>`
}
finishList.innerHTML = mailStr;
var doneNum = document.querySelector('.doneNum');
doneNum.textContent = len;
}
如果點選「刪除」,執行以下程式:
//刪除已邀請的貴賓
function deleDone(e){
e.preventDefault();
if(e.target.nodeName !== 'A'){
return;
}
let num = e.target.num;
//清除計畫邀請data中的資料
finishData.splice(num,1);
//更新已寄出邀請函的名單
localStorage.setItem('listFinish',JSON.stringify(finishData));
//渲染到網頁
updateFinish(finishData);
}
來看看我的實作吧!
https://codepen.io/popeye_ux/pen/KKqbMwq